/*
 * @Author: xiaoyan
 * @Date: 2021-11-25 11:10:09
 * @LastEditors: xiaoyan
 * @LastEditTime: 2022-02-22 11:01:43
 * @Description: 
 * @FilePath: \user_auth_front\src\pages\menu\components\add.tsx
 */
import { Input, Form,Select,Radio, Row,Col, message } from "antd";
import { useMappedState,useDispatch} from 'redux-react-hook';
import { closeModal } from "@/store/modules/app"
import SelectOrganizationLists from "@/pages/components/SelectOrganizationLists";
import { applicationListAll, menuAdd, menuDels, menuUpdate } from "@/api";
import { IApplication, IRes } from "@/interface";
import { useEffect, useMemo, useState } from "react";
import store from "@/store";
export default ()=>{
    const { Option } = Select;
    const dispatch = useDispatch();
    const dialogData:any = store.getState().app.modalConf;
    const id = useMemo(()=>dialogData.data,[dialogData.data]);
    const [form] = Form.useForm();

    dialogData.handleOk = form.submit;//设置手动提交事件
    useEffect(()=>{
        if(id) ajaxDetail(id);
    },[id]);
    //请求详情数据
    const ajaxDetail = (id:Number)=>{
        menuDels({id}).then((res:any)=>{
            if(res.code === 0){
                form.setFieldsValue({
                    ...res.data
                });
            }else{
                message.error(res.msg);
            }
        });
    };

    const onFinish = (data:Object)=>{
        handlleSubmit(data).then((res:any)=>{
            if(res.code === 0){
                const modalConf:any = useMappedState(state=>state.app.modalConf);
                if(typeof modalConf.handleBack === "function") {
                    id?modalConf.handleBack() : modalConf.handleBack({page:1});
                }
                dispatch(closeModal());
            }else{
                message.error(res.msg);
            }
        });
    };
    const handlleSubmit = (data:Object)=>{
        if(id){
            return menuUpdate({userId:id,...data});
        }else{
            return menuAdd(data);
        }
    };

    const changeOrganization = (val:number)=>{
        ajaxApplicationList(val);
    };
    const [applicationList,setApplicationList] = useState<Array<any>>([]);
    //请求应用列表
    const ajaxApplicationList = (organizationId:number)=>{
        const data = {
            organizationId,
        };
        applicationListAll(data).then((res:IRes<Array<IApplication>>)=>{
            if(res.code === 0){
                setApplicationList(res.data);
            }else{
                message.error(res.msg);
            }
        });
    };
    const selectApplicationLists = ()=>{
        return applicationList.map((item:any)=>
            <Option key={item.applicationId} value={item.organizationId}>{item.name}</Option>
        );
    };
    const formItemLayout = {
        labelCol: { span: 6 },
        wrapperCol: { span: 18 },
    };
    return(
        <Form form={form} onFinish={onFinish} {...formItemLayout}>
            <Row gutter={24}>
                <Col span={12}>
                    <Form.Item label="所属机构：" name="organizationId" rules={[{required: true, message: '请选择所属机构'}]}>
                        <Select style={{ width: "100%" }} allowClear showSearch optionFilterProp="children" onChange={changeOrganization}>
                            {SelectOrganizationLists()}
                        </Select>
                    </Form.Item>
                </Col>
                <Col span={12}>
                    <Form.Item label="所属应用：" name="applicationId" rules={[{required: true, message: '请选择所属应用'}]}>
                        <Select style={{ width: "100%" }} allowClear>
                            {selectApplicationLists()}
                        </Select>
                    </Form.Item>
                </Col>
            </Row>
            <Row gutter={24}>
                <Col span={12}>
                    <Form.Item label="类型：" name="type" rules={[{required: true, message: '请输入选择类型'}]}>
                        <Radio.Group>
                            <Radio value={1}>目录</Radio>
                            <Radio value={2}>菜单</Radio>
                            <Radio value={3}>按钮</Radio>
                        </Radio.Group>
                    </Form.Item>
                </Col>
                <Col span={12}>
                    <Form.Item label="父级菜单：" name="parentId">
                        <Select style={{ width: "100%" }} allowClear>
                            <Option value="考勤管理">考勤管理</Option>
                        </Select>
                    </Form.Item>
                </Col>
            </Row>
            <Row gutter={24}>
                <Col span={12}>
                    <Form.Item label="菜单名称：" name="name" rules={[{required: true, message: '请输入菜单名称'}]}>
                        <Input allowClear />
                    </Form.Item>
                </Col>
                <Col span={12}>
                    <Form.Item label="菜单URL：" name="url" rules={[{required: true, message: '请输入菜单URL'}]}>
                        <Input allowClear />
                    </Form.Item>
                </Col>
            </Row>
            <Row gutter={24}>
                <Col span={12}>
                    <Form.Item label="菜单编码：" name="code" rules={[{required: true, message: '请输入菜单编码'}]}>
                        <Input allowClear />
                    </Form.Item>
                </Col>
            </Row>
        </Form>
    );
}